import { InboxOutlined } from "@ant-design/icons";
import { UploadProps, Upload, ColorPicker, Form, Space } from "antd";
import { useState } from "react";
import "./index.less";
const { Dragger } = Upload;
type FieldType = {
  pictureSourse?: number;
  dress?: string;
  targetColor?: number;
};
const CrossDress = () => {
  const [form] = Form.useForm();
  const [imgSrc, setImgSrc] = useState("");
  const [imgDress, setImgDress] = useState("");
  const [color, setColor] = useState("#1677ff");
  const fileChage = (file: File, type: string) => {
    const reader = new FileReader();
    reader.onload = function (event) {
      const url = event.target?.result as string;
      if (type === "imgSrc") {
        setImgSrc(url);
      } else {
        setImgDress(url);
      }
    };
    reader.readAsDataURL(file);
  };
  const uploadProps: UploadProps = {
    name: "file",
    accept: ".png,.jpg,.webp,.jpeg",
    multiple: false,
    maxCount: 1,
    onRemove(_file: any) {
      setImgSrc("");
      //   const canvas = myImage.current as HTMLCanvasElement;
      //   getCtx().clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
    },
  };
  return (
    <div className="P-account wp-100 hp-100">
      <div className="flex flexJc-space-between wp-100">
        <Form
          form={form}
          layout={"vertical"}
          className="wp-100 flex gap-12"
          initialValues={{ remember: true }}
          // onFinish={downLoadPicture}
          // onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item<FieldType>
            label="目标图片"
            tooltip=""
            className="wp-43"
            name="pictureSourse"
            valuePropName="fileList"
            rules={[{ required: true, message: "请上传图片" }]}
            getValueFromEvent={(e: any) => (Array.isArray(e) ? e : e?.fileList)}
          >
            <Dragger
              beforeUpload={(file: File) => {
                fileChage(file, "imgSrc");
                return false;
              }}
              {...uploadProps}
            >
              <p className="ant-upload-drag-icon">
                <InboxOutlined />
              </p>
            </Dragger>
          </Form.Item>
          <Form.Item<FieldType>
            label="抠图装"
            name="dress"
            className="wp-43"
            valuePropName="fileList"
            rules={[{ required: true, message: "请上传图片" }]}
            getValueFromEvent={(e: any) => (Array.isArray(e) ? e : e?.fileList)}
          >
            <Dragger
              beforeUpload={(file: File) => {
                fileChage(file, "imgDress");
                return false;
              }}
              {...uploadProps}
            >
              <p className="ant-upload-drag-icon">
                <InboxOutlined />
              </p>
            </Dragger>
          </Form.Item>
          <Form.Item<FieldType>
            label="变色"
            name="targetColor"
            //tooltip="点击上传的图片中的区域，替换被点击点区域内相似色值的块"
            rules={[{ required: true, message: "请选择替换色值" }]}
          >
            <ColorPicker
              defaultValue={color}
              onChange={(_color, hex) => {
                setColor(hex);
              }}
            />
          </Form.Item>
        </Form>
      </div>
      <div className="wp-100">
        {imgSrc && (
          <div className="cross-dress-content">
            <img
              onLoad={(e: any) => {
                const { width, height } = e.target;
                console.log(1111111, { width, height });
              }}
              className="cross-dress-img"
              src={imgSrc}
              alt=""
            />
            <div
              style={{
                mask:`url(${imgDress}) 50% 50% / cover`,
                background: color,
              }}
              className="cross-dress-skirt"
            ></div>
          </div>
        )}
      </div>
    </div>
  );
};
export default CrossDress;
